@extends('adminlte::page')

@section('title', 'OWL CRM Dashboard')

@section('content_header')
    <h1>Task</h1>
@stop

@section('content')
    @if (session('error'))
        <h6 class="alert alert-danger">
            {{ session('error') }}
        </h6>
    @endif
    @if ($errors->any())
        <div class="alert alert-danger">
            <ul>
                @foreach ($errors->all() as $error)
                    <li>{{ $error }}</li>
                @endforeach
            </ul>
        </div>
    @endif
    {{-- <p>Welcome to the OWL CRM admin panel.</p> --}}
    <div class="row justify-content-between mb-5">
        <div class="col-auto">
            <a href="{{ route('task.index') }}" class="btn btn-secondary">
                <i class="fas fa-arrow-left"></i> Back to Task
            </a>
        </div>
        <div class="col-auto">
            {{-- <a href="{{ route('project.update', $project->id) }}" class="btn btn-primary">
                <i class="fas fas fa-save"></i> Save Project
            </a> --}}
        </div>
        <div class="col-auto">
            <a href="{{ route('task.edit', $task->id) }}" class="btn btn-primary">
                <i class="fas fa-pencil-alt"></i> Edit Task
            </a>
            <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#delete">
                <i class="fa fa-trash-alt"></i> Delete Task
            </button>

            <div class="custom-control custom-switch custom-switch-off-danger custom-switch-on-success mt-2">
                <input 
                    type="checkbox" 
                    class="custom-control-input  toggle-status" 
                    id="paymentSwitch{{ $task->id }}" 
                    onchange="updatePaymentStatus({{ $task->id }}, this)" 
                    {{ $task->payment_status ? 'checked disabled' : '' }}>
                <label class="custom-control-label" for="paymentSwitch{{ $task->id }}">
                    {{ $task->payment_status ? 'Payment Done' : 'Mark as Done' }}
                </label>
            </div>
            
            
        </div>
    </div>

    <div class="row">
        <!-- Left Column: Task Information -->
        <div class="col-12 col-md-6">
            <div class="card card-dark">
                <div class="card-header">
                    <h3 class="card-title">Task Information</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <ul class="list-group list-group-flush">
                        <li class="list-group-item"><b>subject:</b>
                            {{ $task->subject }}</li>
                        <li class="list-group-item"><b>Start Date:</b> {{ formatDate($task->start_date, 'Y/m/d H:i:s') }}
                        </li>
                        <li class="list-group-item"><b>Due Date:</b> {{ formatDate($task->due_date, 'Y/m/d H:i:s') }}</li>
                        <li class="list-group-item"><b>Priority:</b> {{ $task->priority }}</li>
                        <li class="list-group-item"><b>Assigned To:</b>
                            {{ $task->user->first_name && $task->user->last_name ? $task->user->first_name . $task->user->last_name : 'n/a' }}
                        </li>
                        <li class="list-group-item"><b>Created By:</b>
                            {{ $task->created_by_user->first_name && $task->created_by_user->last_name ? $task->created_by_user->first_name . $task->created_by_user->last_name : 'n/a' }}
                        </li>
                        <li class="list-group-item"><b>Entity Type:</b> {{ $task->entity_type }}</li>
                        {{-- <li class="list-group-item"><b>Entity Id:</b> {{ $task->entity_id }}</li> --}}
                        <li class="list-group-item"><b>State:</b> {{ $task->state }}</li>
                        <li class="list-group-item"><b>Status:</b> {{ $task->status == 0 ? 'in-active' : 'active' }}</li>



                    </ul>
                </div>
            </div>
        </div>

        <div class="col-12 col-md-6">
            <div class="card card-dark">
                <div class="card-header">
                    <h3 class="card-title">Task Additional Information</h3>
                    <div class="card-tools">
                        <button type="button" class="btn btn-tool" data-card-widget="collapse">
                            <i class="fas fa-minus"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body">
        
                    <hr>
        
        
                    <!-- Add Comment Form -->
                    <form action="{{ route('comments.store', $task->id) }}" method="POST" class="mt-3">
                        @csrf
                        <div class="form-group">
                            <textarea name="comment" id="comment" class="form-control" rows="3" placeholder="Add your comment..." required=" this field is required"></textarea>
                        </div>
                        <div class="text-right">
                            <button type="submit" class="btn btn-primary btn-sm">
                                <i class="fa fa-paper-plane"></i> Submit Comment
                            </button>
                        </div>
                    </form>
                    @error('comment')
                    <span class="text-danger">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                    <h5><b>Comments:</b></h5>
                    <ul class="list-group list-group-flush" id="commentsList">
                        @foreach($task->comments as $comment)
                            <li class="list-group-item px-0">
                                <div class="comment-box">
                                    <p><i class="fas fa-user mr-2"></i><strong>{{ $comment->user->first_name }} {{ $comment->user->last_name }}</strong> 
                                       <span class="text-muted">({{ $comment->created_at->format('Y/m/d H:i:s') }})</span></p>
                                    <p>{{ $comment->comment }}</p>
                                </div>
                            </li>
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
        
    </div>

    <!-- Modal -->
    <div class="modal fade" id="delete" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">{{ $task->name }}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>This will delete this task permanently</p>
                    <p>Are you sure?</p>
                </div>
                <div class="modal-footer">
                    <form method="POST" action="{{ route('task.destroy', $task->id) }}">
                        @csrf
                        <input type="hidden" name="_method" value="DELETE">
                        <button type="submit" class="btn btn-danger" id="delete_btn">Yes, Delete</button>
                    </form>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
@stop

@section('css')
    {{-- Add here extra stylesheets --}}
@stop

@section('js')




    <script type="text/javascript" >

$(document).on('change', '.toggle-status', function() {
    // alert('ngkjhgkljgkjg');
    const $this = $(this);  // Save reference to the toggle switch
    const taskId = $this.data('id');
    const isChecked = $this.is(':checked');
    const statusLabel = $this.siblings('label');

    if (!confirm(`Are you sure you want to ${isChecked ? 'mark as done' : 'mark as not done'}?`)) {
        $this.prop('checked', !isChecked); // Revert the change
        return;
    }

    $.ajax({
    url: '/task/' + taskId + '/update-payment-status',  // Update the route here
    method: 'POST',
    data: {
        _token: '{{ csrf_token() }}',
        payment_status: paymentStatus
    },
    success: function(response) {
        console.log(response);
        if (response.success) {
            // Update the label based on the payment status
            $(checkbox).next('label').text(paymentStatus ? 'Payment Done' : 'Mark as Done');
        } else {
            alert('Failed to update payment status. Please try again.');
        }
    },
    error: function(xhr, status, error) {
        console.log(xhr.responseText);  // Log any errors from the server
        alert('An error occurred. Please try again.');
    }
});

});

$(document).ready(function () {
    $('#commentForm').on('submit', function (e) {
        e.preventDefault();

        // Get the task ID
        let taskId = "{{ $task->id }}";
        let comment = $('#comment').val();
        let token = $('input[name="_token"]').val();

        // Clear previous error
        $('#commentError').addClass('d-none').text('');

        $.ajax({
            url: `/comments/store/${taskId}`,
            type: 'POST',
            data: {
                _token: token,
                comment: comment,
            },
            success: function (response) {
                if (response.success) {
                    // Clear the textarea
                    $('#comment').val('');

                    // Append the new comment to the list
                    $('#commentsList').append(`
                        <li class="list-group-item px-0">
                            <div class="comment-box">
                                <p><i class="fas fa-user mr-2"></i>
                                    <strong>${response.data.user_id}</strong> 
                                    <span class="text-muted">(${new Date(response.data.created_at).toLocaleString()})</span>
                                </p>
                                <p>${response.data.comment}</p>
                            </div>
                        </li>
                    `);
                }
            },
            error: function (xhr) {
                if (xhr.responseJSON && xhr.responseJSON.errors && xhr.responseJSON.errors.comment) {
                    $('#commentError').removeClass('d-none').text(xhr.responseJSON.errors.comment[0]);
                } else {
                    console.log("An error occurred", xhr);
                }
            }
        });
    });
});



        console.log("Hi, I'm using the Laravel-AdminLTE package!");
    </script>
@stop